<template>
  <a-modal v-model='showModal' @ok='confirmOk' @cancel='cancel' :title='titles' width='750px'>
    <a-spin :spinning='loading'>
      <a-form :form='form'>
        <a-row :gutter='[24, 0]'>
          <a-col :span='12'>
            <a-form-item class='mb-15' label='名称' :label-col='labelCol' :wrapper-col='wrapperCol'>
              <a-input placeholder='请输入名称' v-decorator="['name',
                                {
                                    rules: [{ required: true, message: '请输入名称', whitespace: true }],
                                },
                            ]" maxLength='30'></a-input>
            </a-form-item>
          </a-col>

        </a-row>
        <a-row :gutter='[24, 0]'>
          <a-col :span='12'>
            <a-form-item class='mb-15' label='开始时间' :label-col='labelCol' :wrapper-col='wrapperCol'>
              <a-select class='flex-1' @change='changeSelect' placeholder='请选择'
                        v-decorator="['startTime', { rules: [{ required: true, message: '请选择' }] }]">
                <a-select-option :value='item' v-for='(item,index) in dateList'
                                 :key='index'>{{item}}</a-select-option>

              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item class='mb-15' label='结束时间' :label-col='labelCol' :wrapper-col='wrapperCol'>
              <a-select class='flex-1' @change='changeSelect' placeholder='请选择'
                        v-decorator="['endTime', { rules: [{ required: true, message: '请选择' }] }]">
                <a-select-option :value='item' v-for='(item,index) in dateList'
                                 :key='index'>{{item}}</a-select-option>

              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter='[24, 0]'>
          <a-col :span='12'>
            <a-form-item class='mb-15' label='是否启用' :label-col='labelCol' :wrapper-col='wrapperCol'>
              <a-switch checked-children='开' un-checked-children='关'
                        v-decorator="['status', { valuePropName: 'checked' }]" />
            </a-form-item>
          </a-col>
          <a-col :span='12'>
            <a-form-item class='mb-15' label='图片上传' :label-col='labelCol' :wrapper-col='wrapperCol'>
              <PreviewImage :showUpload='isShow' class='mt-12' :is-preview='false' :scene='8'
                            :show-upload='formgetFileLength(`sliderPicUrls`) < 1'
                            @uploadSuccess='formuploadSuccess($event, `sliderPicUrls`)'
                            v-decorator="[
	                  `sliderPicUrls`,
	                  {
	                    rules: [{ required: true, message: '请上传图片', type: 'array' }],
	                    initialValue: [],
	                  },
	                ]" />
            </a-form-item>
          </a-col>
        </a-row>

      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
import {
  get
} from 'lodash'
import {
  seckillCreate, seckillUpdate
} from '@/api/index'

export default {
  data() {
    return {
      loading: false,
      isShow: true,
      labelCol: {
        span: 8
      },
      wrapperCol: {
        span: 16
      },
      details: {},
      showModal: false,
      titles: '新增',
      info: {},
      form: this.$form.createForm(this),
      dateList:[]
    }
  },
  computed: {},
  watch: {},
  async created() {
    let list = []
    for (let i = 0; i < 24; i++) {
      list.push((i < 10 ? '0' : '') + i + ':00:00')
      list.push((i < 10 ? '0' : '') + i + ':30:00')
    }
    this.dateList = list
  },
  methods: {
    formgetFileLength(type) {//获取图片
      return get(this.form.getFieldValue(type), 'length') || 0
    },
    formuploadSuccess(data, type) {
      this.form.setFieldsValue({
        sliderPicUrls: [...this.form.getFieldValue(type), data.path]
      })
    },
    changeSelect(e) {
      console.log(e)
    },
    onChange(e) {
      console.log(e.target.value)
    },
    cancel() {

      this.form.resetFields()
      this.showModal = false

    },
    confirmOk() {
      this.form.validateFields((err, values) => {

        if (!err) {
          // this.loading = true
          const {
            info

          } = this
          let data = {
            id: info && info.id ? info.id : undefined,
            ...this.$utils.trimValue(values),
            status: typeof values.status === 'undefined' ? 1 : values.status?1:0
          }
          const fun = info && info.id ? seckillUpdate : seckillCreate
          fun(data)
            .then(() => {
              this.$message.success(info && info.id ? '修改成功！' : '新增成功！')
              this.$emit('upload')
              this.cancel()
            })
            .finally(() => {
              this.loading = false
            })
        }
      })
    },
    getData() {
      this.loading = true
      deductionDetail({ id: 1 }).then(data => {
        this.details = data
      }).finally(() => this.loading = false)
    },
    open(data) {
      this.info = data
      if (data.id) {
        this.titles = '修改'
      } else {
        this.titles = '新增'
      }
      this.showModal = true
      // images:['https://img2.baidu.com/it/u=1906732828,3160455141&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666']
      this.$nextTick(() => {
        this.form.setFieldsValue({
          name:data.name,
          startTime:data.startTime,
          endTime:data.endTime,
          sliderPicUrls:data.sliderPicUrls?data.sliderPicUrls:[],
          status:data.status
        })
      })
      // this.$emit('upload')
      // this.$nextTick(() => {
      //     this.form.setFieldsValue({
      // 					...res
      // 				})

      // 			})
    }
  }
}
</script>
<style lang='less' scoped>
/deep/ .ant-form-item-label {
  // width: 100px;


}
</style>
